<template>
  <div class="BlogDetail">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="19">
        <div class="grid-content">
          <span>{{ webAddress }}</span>
        </div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="14" class="blog_content">
        <el-row type="flex" justify="center">
          <el-col :span="18" class="BlogTitle"> {{ titles.title }} </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="20">
            <div class="introduce">
              {{ titles.introduce }}
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="24">
            <div class="content" v-html="titles.content">
              {{ titles.content }}
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5" class="blog_other">
        <!-- 博客主 -->
        <el-row type="flex" class="blogOwner">
          <el-col :span="24">
            <el-row type="flex" justify="start">
              <el-col :span="6">
                <el-avatar
                  style="margin: auto 0 auto 20px"
                  :size="50"
                  fit="cover"
                  :src="author.authorAvatar"
                  icon="el-icon-user-solid"
                ></el-avatar>
              </el-col>

              <el-col :span="14" style="margin-top: 5px">
                <el-row>
                  <span
                    ><strong>{{ author.authorName }}</strong></span
                  >
                </el-row>
                <el-row>
                  <span> 粉丝:{{ author.authorfans }}</span>
                </el-row>
              </el-col>

              <el-col :span="4" style="margin: auto 20px auto auto">
                <el-row>
                  <button @click="follow()" :class="gz ? 'guanzhu' : 'yiguanzhu'">
                    {{ guanzhutxt }}
                  </button>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 标签 -->
        <el-row type="flex" class="tagsHeader">
          <el-col :span="24">
            <el-row>
              <div class="tagsCloud">
                <i class="fa fa-tags">标签云</i>
              </div>
            </el-row>

            <el-row type="flex">
              <el-col :span="24">
                <div class="tags">
                  <el-tag
                    v-for="item in tags"
                    v-bind:key="item.id"
                    class="el_tags"
                    @click="tagClick(item.tag)"
                  >
                    {{ item.tag }}
                  </el-tag>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row type="flex" class="newTitles">
          <el-col :span="24">
            <el-row>
              <div class="Titles">
                <i class="el-icon-refresh-right">最新文章</i>
              </div>
            </el-row>

            <el-row>
              <div
                class="titleList"
                v-for="(item, index) in titleList"
                v-bind:key="item.id"
              >
                <!-- <div class="listItem"> -->
                <div class="lv">{{ index + 1 }}</div>
                <div class="name" @click="titleClick(item.id)">
                  {{ item.blogTitleHeader }}
                </div>
                <div class="time">{{ item.blogTitlePostTime }}</div>
                <!-- </div> -->
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
} from "@/util/local-storage.js";
import axios from "axios";

export default {
  name: "BlogDetail",
  inject: ["routerRefresh", "getloginInfo"],
  data() {
    return {
      params: {
        id: 0,
      },
      webAddress: "文章",
      author: {
        authorId: 0,
        authorName: "",
        authorAvatar: "",
        authorfans: 0,
      },
      titles: {
        title: "",
        introduce: "",
        content: "",
      },
      guanzhutxt: "关注",
      isFans: false,
      isOwner: false,
      tags: [],
      titleList: [],
      gz: true,
      isLogin:false,
    };
  },
  methods: {
    follow() {
      if (this.isOwner) {
        this.$message({
          duration: 1000,
          message: "不能关注自己",
          center: true,
          type: "warning",
        });
        return;
      }
      if (!this.isLogin) {
        this.$message({
          duration: 1000,
          message: "未登录",
          center: true,
          type: "warning",
        });
        return;
      }
      console.log("id:", localStorage.getItem("id"));
      let params = {
        followedUserId: this.author.authorId,
        fansUserId: localStorage.getItem("id"),
      };
      axios
        .post("http://localhost:8083/follow/setFollow", params)
        .then((res) => {
          if (res.data.errno != 0) {
            this.$message({
              duration: 2000,
              message: res.data.errmsg,
              center: true,
              type: "error",
            });
            return;
          }
          console.log("关注:",res)
          if (res.data.code == 1) {
             this.$message({
              duration: 1000,
              message: "关注成功!",
              center: true,
              type: "success",
            });
            this.gz=false;
            this.guanzhutxt = "已关注";
            this.isFans = true;
            console.log("res:",res);
            
            this.author.authorfans = res.data.data.fans;
          } else if (res.data.code == 2) {
            this.$message({
              duration: 1000,
              message: "已取关",
              center: true,
              type:"warning",
            });
            console.log("res:",res);
            this.gz=true;
            this.guanzhutxt = "关注";
            this.isFans = false;
            this.author.authorfans = res.data.data.fans;
          }
        });
    },
    tagClick(tag) {
      this.$router.replace({ name: "Myblog", query: { tag: tag } });
      // this.routerRefresh();
    },
    titleClick(id) {
      this.$router.replace({ name: "BlogDetail", params: { id: id } });
      this.routerRefresh();
    },
    getTitle() {
      let params = {
        id: this.params.id,
      };
      axios({
        method: "get",
        url: "http://localhost:8083/titles/getTitleById",
        params: params,
      }).then((res) => {
        if (res.data.errno != 0) {
          this.$message({
            duration: 1000,
            message: res.data.errmsg,
            center: true,
            type: "error",
          });
          return;
        } else {
          this.titles.title = res.data.data.title;
          this.titles.introduce = res.data.data.introduce;
          this.titles.content = res.data.data.content;

          this.author.authorId = res.data.data.authorInfo.id;
          this.author.authorName = res.data.data.authorInfo.username;
          this.author.authorAvatar = res.data.data.authorInfo.avatar;
          this.author.authorfans = res.data.data.authorInfo.fans;

          if (localStorage.getItem("username") == this.author.authorName) {
            this.isOwner = true;
          }
          if(!!localStorage.getItem("Authorization")){
            this.getFollowStatus();
            this.isLogin=true;
          }else{
            this.isLogin=false;
          }
          
        }
      });
    },
    getFollowStatus() {
      let params = {
        followedUserId: this.author.authorId,
        fansUserId: localStorage.getItem("id"),
      };
      axios
        .post("http://localhost:8083/follow/getFollowStatus", params)
        .then((res) => {
          if (res.data.errno != 0) {
            this.$message({
              duration: 1000,
              message: res.data.errmsg,
              center: true,
              type: "error",
            });
            return;
          }

          if (res.data.code == 1) {
            this.gz = false;
            this.guanzhutxt = "已关注";
            this.isFans = true;
          } else if (res.data.code == 2) {
            this.gz = true;
            this.guanzhutxt = "关注";
            this.isFans = false;
          }
        });
    },
    getTitleList() {
      let param = {
        page: 1,
        limit: 10,
        tagName: "",
      };
      axios({
        method: "get",
        url: "http://localhost:8083/titles/getList",
        params: param,
      }).then((res) => {
        if (res.data.errno != 0) {
          this.$message({
            duration: 1000,
            message: res.data.errmsg,
            center: true,
            type: "error",
          });
          return;
        } else {
          this.titleList = res.data.data.list;
          console.log(res.data);
        }
      });
    },
    getTags() {
      axios.get("http://localhost:8083/tag/getTags").then((res) => {
        this.tags = res.data.data.list;
      });
    },
  },
  created() {
    console.log("this.$route.params.id:",this.$route.params.id)
    this.params.id = this.$route.params.id;
    this.getTitleList();
    this.getTitle();
    this.getTags();
  },
};
</script>


<style scoped>
.yiguanzhu {
  box-shadow: 0px 0px 0px 2px #9fb4f2;
  /* background: linear-gradient(to bottom, #7892c2 5%, #476e9e 100%); */
  background-color: #7c7c7c;
  border-radius: 10px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 1em;
  width: 70px;
  height: 40px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  user-select: none;
}

.yiguanzhu:hover {
  /* background: linear-gradient(to bottom, #476e9e 5%, #7892c2 100%); */
  background-color: #7e8fa3;
}
.yiguanzhu:active {
  position: relative;
  top: 1px;
}

.guanzhu {
  box-shadow: 0px 0px 0px 2px #9fb4f2;
  background: linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
  background-color: #7892c2;
  border-radius: 10px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 1em;
  width: 70px;
  height: 40px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  user-select: none;
}
.guanzhu:hover {
  background: linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
  background-color: #476e9e;
}
.guanzhu:active {
  position: relative;
  top: 1px;
}

.blogOwner {
  padding: 10px;
  padding-left: 15px;
  box-shadow: 0 1px 8px #5a5454;
  margin-bottom: 20px;
}
.el_tags {
  color: #5a5454;
  margin: 5px;
  cursor: pointer;
}
.el_tags:hover {
  background-color: #01aaed;
}

.lv {
  text-align: center;
  flex: 1;
  background-color: aqua;
  border-radius: 100px;
  margin-right: 8px;
}

.name {
  flex: 5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.name:hover {
  color: #01aaed;
}

.time {
  flex: 3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.titleList {
  display: flex;
  padding: 5px;
}

.newTitles {
  margin-top: 20px;
  padding: 10px;
  padding-left: 15px;
  box-shadow: 0 1px 8px #5a5454;
}

.Titles {
  color: #01aaed;
  border-bottom: #ecf5ff 1px solid;
  margin-bottom: 10px;
}

.tagsHeader {
  padding: 10px;
  padding-left: 15px;
  box-shadow: 0 1px 8px #5a5454;
}

.tagsCloud {
  color: #01aaed;
  border-bottom: #ecf5ff 1px solid;
  margin-bottom: 10px;
}

.BlogTitle {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  font-size: 1.8em;
}

.content {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  box-shadow: inset 0 1px 8px #5a5454;
  margin-top: 10px;
  margin-bottom: 20px;
  text-indent: 2em;
  font-size: 1.1em;
  padding:10px;
  padding-left: 20px;
  padding-right: 20px;
}

.introduce {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  box-shadow: 0 1px 8px #5a5454;
  margin-top: 10px;
  text-indent: 2em;
  font-size: 1.1em;
}

.grid-content {
  display: flex;
  justify-content: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 2px 2px 2px 1px rgb(99, 90, 90);
  border-left: rgb(32, 92, 37) 5px solid;
  min-height: 36px;
  text-align: center;
  margin: auto;
  font-family: KaiTi;
  font-size: 20px;
}

.row-bg {
  padding: 10px 0;
  margin-bottom: 20px;
}

.BlogDetail {
  padding: 10px;
}

.blog_content {
  background-color: rgb(240 240 240 / 0);
  box-shadow: 0 1px 8px #5a5454;
  font-family: KaiTi;
  font-size: 1.2em;
  /* font-size: 1.8em;
  font-weight: 800; */
}

.blog_other {
  margin-left: 20px;
  /* background-color: rgb(209, 191, 170); */
  /* box-shadow: 0 1px 8px #5a5454; */
}

/* .BlogBox {
  width: 100%;
  height: 2000px;
  padding-top: 10px;
  border: 2px rgb(57, 255, 39) solid;
} */
</style>